<template>
  <SelectTrigger label="geoJSON与topoJSON" :options="options" width="350px" />
  <div id="cesiumContainer"></div>
</template>
<script setup>
/**
 * 本案例是加载geojson与topojson 的数据
 * GeoJSON: GeoJSON 是一种用于编码地理数据的基于 JSON（JavaScript Object Notation）的文件格式。
 * TopoJSON: TopoJSON 是 GeoJSON 的扩展格式，专门用于更高效地编码和存储地理数据。与 GeoJSON 不同，
 *           TopoJSON 使用拓扑结构来表示地理要素之间的共享边界，从而减少数据冗余，使文件更小、更易于传输和渲染
 * */
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";

const options = ref([]);
onMounted(() => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";


  options.value = [
    {
      text: "加载geoJSON",
      onselect: async function () {
        viewer.dataSources.removeAll();
        // 无法使用相对路径（不知道为什么）
        Cesium.GeoJsonDataSource.load("/cesiumData/mockData/simplestyles.geojson")
          .then((dataSource) => {
            console.log("加载GEOJSON dataSource", dataSource);
            viewer.dataSources.add(dataSource);
            viewer.flyTo(dataSource);
          })
          .catch((e) => {
            console.error(e);
          });
      },
    },
    {
      text: "加载topoJSON-使用配置样式",
      onselect: async function () {
        viewer.dataSources.removeAll();
        // 无法使用相对路径（不知道为什么）
        Cesium.GeoJsonDataSource.load("/cesiumData/mockData/ne_10m_us_states.topojson", {
          stroke: Cesium.Color.HOTPINK, // 折线和多边形轮廓的默认颜色。
          fill: Cesium.Color.PINK.withAlpha(0.5), // 填充颜色
          strokeWidth: 3, //  折线和多边形轮廓的宽度
        })
          .then((dataSource) => {
            console.log("加载topoJSON dataSource", dataSource);
            viewer.dataSources.add(dataSource);
            viewer.flyTo(dataSource);
          })
          .catch((e) => {
            console.error(e);
          });
      },
    },
    {
      text: "加载topoJSON-自定义样式",
      onselect: async function () {
        viewer.dataSources.removeAll();
        // 无法使用相对路径（不知道为什么）
        Cesium.GeoJsonDataSource.load("/cesiumData/mockData/ne_10m_us_states.topojson")
          .then((dataSource) => {
            console.log("加载topoJSON dataSource", dataSource);
            viewer.dataSources.add(dataSource);
            viewer.flyTo(dataSource);

            var entities = dataSource.entities.values;
            var colorHash = {};
            for (var i = 0; i < entities.length; i++) {
              // 设置每一个实体的样式
              var entity = entities[i];
              var name = entity.name;
              var color = colorHash[name];
              if (!color) {
                color = Cesium.Color.fromRandom({
                  alpha: 1.0,
                });
                colorHash[name] = color;
              }

              entity.polygon.material = color; // 设置颜色
              entity.polygon.outline = false; // 移除轮廓线

              // 根据人口，拉伸出高度
              entity.polygon.extrudedHeight =
                entity.properties.Population / 50.0;
            }
          })
          .catch((e) => {
            console.error(e);
          });
      },
    },
  ];
});
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
